﻿@{
    ViewBag.Title = "InfoWindow";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    #map {
      width: 100%;
      height: 500px;
      border: 1px solid #000;
    }
    .info {
        width: 250px;
        height: 100px;
        font-size: 12pt;
        color: #008000;
        font-weight: bold;
        text-align: center;
    }
</style>

@Html.Partial("~/Views/Shared/_PageNote.cshtml")

<div id="map"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    window.onload = function () {

        // Creating a reference to the mapDiv
        var mapDiv = document.getElementById('map');

        // Creating a latLng for the center of the map
        var latlng = new google.maps.LatLng(31.41, 121.48);

        // Creating an object literal containing the properties 
        // we want to pass to the map  
        var options = {
            center: latlng,
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Creating the map
        var map = new google.maps.Map(mapDiv, options);

        // Adding a marker to the map
        //var image = 'E://pirate.png';
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(31.41, 121.48),
            map: map,
            title: '宝山区',
            icon: '/Images/pirate.png'
        });

        var infowindow = new google.maps.InfoWindow({
            content: '<div class="info">这是宝山区</div>'
        });

        // Adding a click event to the marker
        google.maps.event.addListener(marker, 'click', function () {
            // Calling the open method of the infoWindow
            infowindow.open(map, marker);
        });
    }
</script>

